<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="author" content="Jackie Do" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    .clear {
        clear: both;
    }
    a {
        text-decoration: none;
    }
    p {
        padding: 5px;
    }
    ul {
        list-style: none;
    }
        #box {
            margin: 10px auto;
            width: 500px;
            border: 1px solid silver;
        }
        #box .box_opt{
            float: left;
            width: 50px;
            height: 50px;
            margin: 5px;
        }
        #box .box_opt:hover {
            cursor: pointer;
        }
        /** MENU **/
        #menu {
            width: 100px;
            margin: 10px auto;
        }
        #menu > ul > li {
            margin: 5px;
        }
        #menu li a{
            display: block;
            background: black;
            color: white;
            width: 100px;
        }
        #menu li > ul {
            display: none;
            margin-left: 10px;
        }
    </style>
    <script>
        
        $(document).ready(function() {
            var defaultCss = {
                "color":$("p").css("color"),
                "font-size":$("p").css("font-size")
            };            
            $(".box_opt").click(function() {
               var pos = $(this).attr("pos");
               if (pos != 5) {
                    var color = $('div:eq(' +pos+ ')').css("background-color");
                    $('p').css("color", color);
               } else {
                    $('p').css(defaultCss);
               }
               
            });
            $("#box a").click(function() {
                var used = $(this).attr("title");
                if (used == "A+") {
                    $("p").animate({
                        "font-size": "+=2"
                    }, 0);
                } else {
                    $("p").animate({
                        "font-size": "-=2"
                    }, 0);
                }
            });
            
          
            
            $("#menu > ul > li > a").click(function() {
                var menu_pos = $(this).attr("pos") -1;
                $("li > ul:eq("+menu_pos+")").toggle("slow");
            });
            
        });
    </script>
	<title>Untitled 3</title>
</head>

<body>

<div id="box">
    <h3>Hãy chọn màu chữ: </h3>
    <div class="box_opt" style="background: red;" pos="1">Red</div>
    <div class="box_opt" style="background: blue;" pos="2">Blue</div>
    <div class="box_opt" style="background: green;" pos="3">Green</div>
    <div class="box_opt" style="background: gold;" pos="4">Gold</div>
    <div class="box_opt" style="background: silver;" pos="5">Reset</div>
    <h3>Kích cỡ font: </h3>
    <a href="#" title="A+">A+</a> || <a href="#" title="A-">A-</a>
    <div class="clear"></div>
    <p>Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. Đây là đoạn văn bản mẫu. </p>
</div>

<div id="menu">
    <ul>
        <li><a href="#" pos="1">Menu 1</a>
            <ul>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
            </ul>
        </li>
        <li><a href="#" pos="2">Menu 2</a>
            <ul>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
            </ul>
        </li>
        <li><a href="#" pos="3">Menu 3</a>
            <ul>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
            </ul>
        </li>
        <li><a href="#" pos="4">Menu 4</a>
            <ul>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
                <li><a href="#">Sub-menu</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>